<template>
  <div class="layout-padding row justify-center">
    <div style="width: 600px; max-width: 100vw;">
      <q-modal ref="modal" maximized>
        <q-carousel arrows dots animation :autoplay="perAdtime"  class="text-white full-height">
            <div slot="slide"  class="centered" v-bind:style="{backgroundImage:'url(' + ad.backimage + ')'}" v-for="ad in ads" :key="ad.id">
                <span class="time-countdown" @click="closeAd">
                  关闭 {{adtimes}}s
                </span>
                <h5>{{ad.content}}</h5>
            </div>
        </q-carousel>
      </q-modal>
    </div>
  </div>
</template>

<script>
import { QBtn, QCarousel, QIcon, QModal } from "quasar";
import Storage from '../utils/storage.js'
export default {
  components: {
    QBtn,
    QCarousel,
    QIcon,
    QModal
  },
  data() {
    return {
      timeRecorder:null,
      perAdtime: 3000, //ms
      adtimes: null,
      ads: [
        {
          backimage: "statics/ad001.png",
          content: "生活不止眼前的苟且，还有诗和远方"
        },
        {
          backimage: "statics/ad002.png",
          content: "海内存知己，天涯若比邻"
        },
        {
          backimage: "statics/ad003.png",
          content: "夕阳无限好，只是近黄昏"
        },
        {
          backimage: "statics/ad004.png",
          content: "花有重开日，人无再少年"
        },
        {
          backimage: "statics/ad005.png",
          content: "蓬头垢面，怎好相见"
        },
        {
          backimage: "statics/ad006.png",
          content: "千山暮雪，只影向谁去"
        },
        {
          backimage: "statics/ad007.png",
          content: "等闲变却故人心，却道故人心易变"
        },
        {
          backimage: "statics/ad008.png",
          content: "人面不知何处去，桃花依旧笑春风"
        },
        {
          backimage: "statics/ad009.png",
          content: "来如飞花散如烟，醉里不知年华限"
        },
        {
          backimage: "statics/ad010.png",
          content: "冠盖满京华，斯人独憔悴"
        },
        {
          backimage: "statics/ad011.png",
          content: "沾衣欲湿杏花雨，吹面不寒杨柳风"
        },
      ],
    };
  },
  computed: {
    touch() {
      return this.$q.platform.has.touch ? "has" : "does not have";
    },
  },
  mounted() {
    if(Storage.fetch(Storage.AD_RECORD_KEY)) {
      this.$router.replace("/menus");
      return false;
    }else {
      this.recordAdtimes();
    }
    this.$refs.modal.open();
    this.loadData();
  },
  methods: {
    loadData() {
      this.ads = this.getRandomArrayElements(this.ads,3);
      this.adtimes = this.ads.length * this.perAdtime / 1000;
    },
    getRandomArrayElements(arr, count) {
        var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
        while (i-- > min) {
            index = Math.floor((i + 1) * Math.random());
            temp = shuffled[index];
            shuffled[index] = shuffled[i];
            shuffled[i] = temp;
        }
        return shuffled.slice(min);
    },
    closeAd() {
        if(this.timeRecorder) {
          clearInterval( this.timeRecorder);
        }
        Storage.save(Storage.AD_RECORD_KEY,true)
        this.$refs.modal.close();
        this.$router.replace("/menus");
    },
    recordAdtimes() {
       this.timeRecorder = setInterval(() => {
          this.adtimes--;
          if (this.adtimes <= 0) {
            this.adtimes = 0;
            clearInterval( this.timeRecorder);
            Storage.save(Storage.AD_RECORD_KEY,true)
            this.$router.replace("/menus");
          }
        }, 1000);
    }
  }
};
</script>

<style scoped>
.time-countdown {
  position: fixed;
  top: 10px;
  white-space: nowrap;
  font-size: 1.2rem;
  color: red;
}
</style>
